<template>
  <div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索框和添加分类按钮 -->
    <div class="toolbar">
      <el-input v-model="searchQuery" placeholder="请输入分类名称"></el-input>
      <el-button type="primary" @click="openAddCategoryDialog">添加分类</el-button>
    </div>

    <!-- 数据列表 -->
    <el-table :data="filteredCategoryList" style="width: 100%">
      <!-- 可选框列 -->
      <el-table-column type="selection" width="55"></el-table-column>
      
      <!-- 唯一标识列 -->
      <el-table-column prop="id" label="唯一标识" width="120"></el-table-column>
      
      <!-- 分类名称列 -->
      <el-table-column prop="name" label="分类名称" width="180"></el-table-column>
      
      <!-- 父分类名称列 -->
      <el-table-column label="父分类" width="180">
        <template v-slot="scope">
          <span>{{ getParentCategoryName(scope.row.parent_id) }}</span>
        </template>
      </el-table-column>
      
      <!-- 创建时间列 -->
      <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
      
      <!-- 最后更新时间列 -->
      <el-table-column prop="updated_at" label="最后更新时间" width="180"></el-table-column>
      
      <!-- 描述列 -->
      <el-table-column prop="description" label="描述"></el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button @click="openEditCategoryDialog(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteCategory(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑分类对话框 -->
    <el-dialog :title="isEditing ? '编辑分类' : '添加分类'" v-model="isDialogVisible" width="40%">
      <el-form :model="currentCategory">
        <el-form-item label="分类名称" required>
          <el-input v-model="currentCategory.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentCategory.description"></el-input>
        </el-form-item>
        <el-form-item label="父分类">
          <el-select v-model="currentCategory.parent_id" placeholder="请选择父分类">
            <el-option
              v-for="category in parentCategories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAction">{{ isEditing ? '更新' : '确认' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 搜索查询
const searchQuery = ref('');

// 商品分类数据
const categoryList = ref([
  { id: 1, name: '电子产品', parent_id: null, description: '包含手机、电脑等电子产品', created_at: new Date().toLocaleString(), updated_at: new Date().toLocaleString() },
  { id: 2, name: '家用电器', parent_id: null, description: '包含冰箱、空调等家用电器', created_at: new Date().toLocaleString(), updated_at: new Date().toLocaleString() },
  { id: 3, name: '服饰鞋帽', parent_id: null, description: '包含衣服、鞋子等时尚单品', created_at: new Date().toLocaleString(), updated_at: new Date().toLocaleString() },
  { id: 4, name: '手机', parent_id: 1, description: '智能手机及配件', created_at: new Date().toLocaleString(), updated_at: new Date().toLocaleString() },
  { id: 5, name: '电脑配件', parent_id: 1, description: '包括显示器、键盘、鼠标等', created_at: new Date().toLocaleString(), updated_at: new Date().toLocaleString() },
]);

// 计算过滤后的分类列表
const filteredCategoryList = computed(() => {
  if (searchQuery.value.trim() === '') {
    return categoryList.value;
  }
  return categoryList.value.filter(category =>
    category.name.includes(searchQuery.value.trim())
  );
});

// 控制对话框显示
const isDialogVisible = ref(false);
const isEditing = ref(false);

// 当前编辑/新增的分类数据
const currentCategory = ref({
  id: null,
  name: '',
  description: '',
  parent_id: null,
  created_at: '',
  updated_at: '',
});

// 父分类列表
const parentCategories = computed(() => {
  return categoryList.value.filter(category => category.parent_id === null);
});

// 获取父分类名称
const getParentCategoryName = (parentId) => {
  const parentCategory = categoryList.value.find(category => category.id === parentId);
  return parentCategory ? parentCategory.name : '无';
};

// 打开添加分类对话框
const openAddCategoryDialog = () => {
  currentCategory.value = {
    id: null,
    name: '',
    description: '',
    parent_id: null,
    created_at: '',
    updated_at: '',
  };
  isEditing.value = false;
  isDialogVisible.value = true;
};

// 打开编辑分类对话框
const openEditCategoryDialog = (category) => {
  currentCategory.value = { ...category };
  isEditing.value = true;
  isDialogVisible.value = true;
};

// 确认添加/编辑分类
const confirmAction = () => {
  if (currentCategory.value.name.trim() !== '') {
    const currentTime = new Date().toLocaleString();
    if (isEditing.value) {
      const index = categoryList.value.findIndex(cat => cat.id === currentCategory.value.id);
      if (index !== -1) {
        categoryList.value[index] = { ...currentCategory.value, updated_at: currentTime };
      }
    } else {
      currentCategory.value.id = categoryList.value.length + 1;
      currentCategory.value.created_at = currentTime;
      currentCategory.value.updated_at = currentTime;
      categoryList.value.push(currentCategory.value);
    }
    isDialogVisible.value = false;
  } else {
    alert('分类名称不能为空');
  }
};

// 删除分类
const deleteCategory = (category) => {
  const index = categoryList.value.findIndex(cat => cat.id === category.id);
  if (index !== -1) {
    categoryList.value.splice(index, 1);
  }
};
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
